<template>
  <div>
      <el-upload
          class="upload-demo"
          action="http://localhost:8100/system/SysRole/import"
          multiple
          :limit="3"
          accept=".xls,.xlsx">

        <el-button @click="getxz" type="success">下载模版</el-button>
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>

    <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="150px">
      <el-form-item label="角色名称">
        <el-input v-model="formInline.roleName" placeholder="角色名称" ></el-input>
      </el-form-item>
      <el-form-item label="权限字符">
        <el-input v-model="formInline.roleKey" placeholder="权限字符" ></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="formInline.status" placeholder="状态">
          <el-option label="正常" value="0"></el-option>
          <el-option label="停用" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker
            v-model="formInline.createTimes"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="list">查询</el-button>
        <el-button type="primary" @click="resetForm('formInline')">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
            plain
            size="mini"
            type="primary"
            @click="openadd"
            icon="el-icon-plus"
            v-hasPermi="['system:SysRole:add']"
        >添加</el-button>
        <el-button
            plain
            icon="el-icon-edit"
            size="mini"
            type="success"
            @click="xiugai"
            :disabled="single"
            v-hasPermi="['system:SysRole:edit']"
        >修改</el-button>
        <el-button
            plain
            icon="el-icon-delete"
            size="mini"
            type="warning"
            @click="remove"
            :disabled="multiple"
            v-hasPermi="['system:SysRole:remove']"
        >删除</el-button>
        <el-button
            plain
            icon="el-icon-download"
            size="mini"
            type="danger"
            @click="exRole"
            v-hasPermi="['system:SysRole:exRole']"
        >导出</el-button>
      </el-col>
    </el-row>

    <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          fixed
          prop="roleId"
          label="角色编号"
          width="150">
      </el-table-column>
      <el-table-column
          prop="roleName"
          label="角色名称"
          width="120">
      </el-table-column>
      <el-table-column
          prop="roleKey"
          label="权限字符"
          width="120">
      </el-table-column>
      <el-table-column
          prop="roleSort"
          label="显示顺序"
          width="120">
      </el-table-column>
      <el-table-column
          prop="status"
          label="状态"
          width="300">
        <template v-slot="s">
          <el-tag v-if="s.row.status==0">正常</el-tag>
          <el-tag v-if="s.row.status==1">停用</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="创建时间"
          width="200">
      </el-table-column>
      <el-table-column
          label="图片"
          width="120">
        <template v-slot="s">
          <el-image
              style="width: 100px; height: 100px"
              :src="s.row.avatar"></el-image>
        </template>
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="500">
        <template slot-scope="scope">
          <el-button @click="openUpdate(scope.row)" type="text" size="small">修改</el-button>
          <el-button @click="Roledelete(scope.row.roleId)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pageSize"
        @current-change="handleCurrentChange"
        :total="total">
    </el-pagination>

    <el-button @click="initChart" type="primary">展开折线图</el-button>
    <div>
      <div id="main" style="height: 300px;width: 500px"></div>
    </div>
    <el-dialog title="添加角色"  :visible.sync="dialogFormVisible">
      <el-form :model="addForm" :rules="rules" ref="ruleForm">
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="addForm.roleName"></el-input>
        </el-form-item>
        <el-form-item label="权限字符" prop="roleKey">
          <el-input v-model="addForm.roleKey"></el-input>
        </el-form-item>
        <el-form-item label="显示顺序" prop="roleSort">
          <el-input-number v-model="addForm.roleSort" controls-position="right" :min="1" :max="10"></el-input-number>
        </el-form-item>
        <el-form-item label="角色状态">
          <el-radio v-model="addForm.status" label="0">正常</el-radio>
          <el-radio v-model="addForm.status" label="1">停用</el-radio>
        </el-form-item>
        <el-form-item label="菜单权限" v-show="addForm.status == 0">
          <el-checkbox @change="handleCheckedTreeExpand($event)">展开/折叠</el-checkbox>
          <el-checkbox @change="handleCheckedTreeNodeAll($event)">全选/全不选</el-checkbox>
          <el-checkbox @change="handleCheckedTreeConnect($event)">父子联动</el-checkbox>
          <el-tree
              :data="roleProps"
              show-checkbox
              ref="menu"
              node-key="id"
              :default-expand-all="this.zhankai"
              :default-expanded-keys="[2, 3]"
              :default-checked-keys="[5]"
              :props="defaultProps"
          >
          </el-tree>

        </el-form-item>
        <el-form-item label="图片">
          <el-upload
              class="avatar-uploader"
              action="http://localhost:8100/system/SysRole/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :befor-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add('ruleForm')">提交</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改角色" :visible.sync="updateFormVisible">
      <el-form :model="updateForm">
        <el-form-item label="角色名称" >
          <el-input v-model="updateForm.roleName"></el-input>
        </el-form-item>
        <el-form-item label="权限字符">
          <el-input v-model="updateForm.roleKey"></el-input>
        </el-form-item>
        <el-form-item label="显示顺序" prop="roleSort">
          <el-input-number v-model="updateForm.roleSort" controls-position="right" :min="1" :max="10"></el-input-number>
        </el-form-item>
        <el-form-item label="角色状态">
          <el-radio v-model="updateForm.status" label="0">正常</el-radio>
          <el-radio v-model="updateForm.status" label="1">停用</el-radio>
        </el-form-item>
        <el-date-picker-item label="创建时间">
          <el-date-picker v-model="updateForm.createTime"></el-date-picker>
        </el-date-picker-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="update">修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "RoleListView",
  data(){
    return{
      imageUrl:'',
      name:"",
      roleProps:[],
      zhankai:false,
      tableData:[],
      formInline:{},
      total:0,
      pageSize:4,
      pageNum:1,
      dialogFormVisible:false,
      addForm:{status:0,roleSort:1,roleId:''},
      updateFormVisible:false,
      updateForm:{},
      single:true,
      multipleSelection:[],
      ids:[],
      multiple:true,
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      x:[],
      y:[],
      rules: {
        roleName: [
          { required: true, message: '请输入角色名称', trigger: 'blur' },
        ],
        roleKey: [
          { required: true, message: '请输入权限字符', trigger: 'change' }
        ],
        roleSort: [
          { required: true, message: '请输入显示顺序', trigger: 'change' }
        ],
      }
    };
  },
  methods:{
    xiugai(){
      this.axios.post("/system/SysRole/update",this.updateForm).then(r=>{
        if (r.data.code==200){
          this.updateFormVisible=false;
          this.$message.success(r.data.msg)
          this.list();
        }else {
          this.$message.error(r.data.msg)
        }
      })
    },
    handleAvatarSuccess(res,file){
      this.imageUrl=URL.createObjectURL(file.raw)
      this.addForm.avatar=res
    },
    beforeAvatarUpload(file){
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    handleNodeClick(data) {
      console.log(data);
      this.name=data.name;
      this.id=data.id
    },
    list(){
      this.axios.post("/system/SysRole/list?pageSize="+this.pageSize+"&pageNum="+this.pageNum,this.formInline).then(r=>{
        this.tableData=r.data.data.list
        this.total=r.data.data.total
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      for (let i = 0; i < val.length; i++) {
        this.ids[i]=val[i].roleId;
      }
      this.single=val.length!=1;
      this.multiple=!val.length;
    },
    remove(){
      this.axios.post("/system/SysRole/deletes?ids="+this.ids).then(res=>{
        if (res.data.code==200){
          this.$message.success("删除成功");
          this.list();
        }else{
          this.$message.error("删除失败");
        }
      })
    },
    exRole(){
      window.location.href=this.axios.defaults.baseURL+"system/SysRole/exRole";
    },
    handleCurrentChange(newPage){
      this.pageNum=newPage;
      this.list()
    },
    add(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios.post("/system/SysRole/add",this.addForm).then(r=>{
            console.log(this.addForm.roleId)
            if (r.data.code==200){
              this.dialogFormVisible=false;
              this.$message.success(r.data.msg)
              this.list();
            }else {
              this.$message.error(r.data.msg)
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    openadd(){
      this.dialogFormVisible=true;
      this.addForm={status: '0',roleSort:'1'}
    },
    openUpdate(row){
      this.updateFormVisible=true;
      this.updateForm=row
    },
    update(){
      this.axios.post("/system/SysRole/update",this.updateForm).then(r=>{
        if (r.data.code==200){
          this.updateFormVisible=false;
          this.$message.success(r.data.msg)
          this.list();
        }else {
          this.$message.error(r.data.msg)
        }
      })
    },
    Roledelete(roleId){
      this.axios.post("/system/SysRole/delete?roleId="+roleId).then(r=>{
        if (r.data.code==200){
          this.$message.success(r.data.msg)
          this.list();
        }else {
          this.$message.error(r.data.msg)
        }
      })
    },
    handleCheckedTreeExpand(value){
      let treeList = this.roleProps;
      for (let i = 0; i < treeList.length; i++) {
        this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value;
      }
    },
    handleCheckedTreeNodeAll(value){
      this.$refs.menu.setCheckedNodes(value ? this.roleProps: []);
    },
    handleCheckedTreeConnect(){

    },
    menuList(){
      this.axios.post("/system/system/list2",this.formInline).then(res=>{
        this.roleProps=res.data.data
      })
    },
    resetForm() {
      window.location.reload()
    },
    initChart(){
      this.axios.post("/system/SysRole/selectRoleCount").then(res=>{
        this.zxt=res.data.data;
        let xData = [];
        let yData = [];
        this.zxt.forEach(item => {
          xData.push(item.rname);
          yData.push(item.uid);
          console.log(this.x);
          console.log(this.y);

        });

        this.x = xData;
        this.y= yData;
        var echarts = require('echarts');
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
          xAxis: {
            type: 'category',
            data: this.x,
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: this.y,
              type: 'line'
            }
          ]
        };
        console.log(this.x)
        console.log(this.y);
        option && myChart.setOption(option);
      })
    },
    getxz(){
        window.location.href="http://localhost:9090/2110/role/role.xlsx"
    },
  },
  created() {
    this.menuList()
    this.list()
  }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>